<template>
  <!-- 虫害预警配置 -->
  <BaseMainSlot>
    <template v-slot:zhactbar>
      <ActionBar
        :page-no="39"
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:content>
      <el-table
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="calc(100% - 50px)"
        @row-click="handleEdit"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="pestName" label="害虫名称" />
        <el-table-column prop="pestNum" label="害虫数量" />
        <el-table-column prop="alarmLevel" label="告警等级" />
        <el-table-column prop="disposal" label="描述" />
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize($event)"
        @changeCurrentPage="changeCurrentPage"
      />
      <el-dialog
        title="添加预警配置"
        :visible.sync="isaddshowdiaview"
        width="40%"
        :before-close="() =>{ cancel(); isaddshowdiaview = false}"
      >
        <div class="zh-dialog-content">
          <div class="line-type1">
            <div class="line-type1-name">选择虫害</div>
            <div class="line-type1-value">
              <el-select v-model="formData.pestId">
                <el-option v-for="(pestitem,pestindex) in pestList" :key="pestindex" :value="pestitem.pestId" :label="pestitem.pestName" />
              </el-select>
            </div>
          </div>
          <div class="line-type2">
            <div class="line-type2-name">风险等级</div>
            <div class="line-type2-value" style="color: rgba(67, 207, 124, 1);">低风险</div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">低风险虫害数量</div>
            <div class="line-type1-value">
              <el-input v-model="alarmaddlist[0].pestNum" placeholder="低风险虫害数量" />
            </div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">建议处理方法</div>
            <div class="line-type1-value">
              <el-input
                v-model="alarmaddlist[0].disposal"
                type="textarea"
                :rows="2"
                placeholder="请输入"
              />
            </div>
          </div>
          <!-- 中风险 -->
          <div class="line-type2">
            <div class="line-type2-name">风险等级</div>
            <div class="line-type2-value" style="color: rgba(255, 141, 26, 1);">中风险</div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">中风险虫害数量</div>
            <div class="line-type1-value">
              <el-input v-model="alarmaddlist[1].pestNum" placeholder="中风险虫害数量" />
            </div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">建议处理方法</div>
            <div class="line-type1-value">
              <el-input
                v-model="alarmaddlist[1].disposal"
                type="textarea"
                :rows="2"
                placeholder="请输入"
              />
            </div>
          </div>
          <!-- 高风险 -->
          <div class="line-type2">
            <div class="line-type2-name">风险等级</div>
            <div class="line-type2-value" style="color: rgba(212, 48, 48, 1);">高风险</div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">高风险虫害数量</div>
            <div class="line-type1-value">
              <el-input v-model="alarmaddlist[2].pestNum" placeholder="高风险虫害数量" />
            </div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">建议处理方法</div>
            <div class="line-type1-value">
              <el-input
                v-model="alarmaddlist[2].disposal"
                type="textarea"
                :rows="2"
                placeholder="请输入"
              />
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" type="success" @click="() =>{ cancel(); isaddshowdiaview = false}">取消</el-button>
          <el-button class="zh-button-two" type="primary" @click="save()">确认</el-button>
        </span>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog
        title="修改预警配置"
        :visible.sync="iseditshowdiaview"
        width="40%"
        :before-close="() =>{ cancel(); iseditshowdiaview = false}"
      >
        <div class="zh-dialog-content">
          <div class="line-type1">
            <div class="line-type1-name">选择虫害</div>
            <div class="line-type1-value">
              <el-select v-model="formData.pestId" disabled>
                <el-option v-for="(pestitem,pestindex) in pestList" :key="pestindex" :value="pestitem.pestId" :label="pestitem.pestName" />
              </el-select>
            </div>
          </div>
          <div class="line-type2">
            <div class="line-type2-name">风险等级</div>
            <div class="line-type2-value" style="color: rgba(67, 207, 124, 1);">低风险</div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">低风险虫害数量</div>
            <div class="line-type1-value">
              <el-input v-model="editparmlist[0].pestNum" placeholder="低风险虫害数量" />
            </div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">建议处理方法</div>
            <div class="line-type1-value">
              <el-input
                v-model="editparmlist[0].disposal"
                type="textarea"
                :rows="2"
                placeholder="请输入"
              />
            </div>
          </div>
          <!-- 中风险 -->
          <div class="line-type2">
            <div class="line-type2-name">风险等级</div>
            <div class="line-type2-value" style="color: rgba(255, 141, 26, 1);">中风险</div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">中风险虫害数量</div>
            <div class="line-type1-value">
              <el-input v-model="editparmlist[1].pestNum" placeholder="中风险虫害数量" />
            </div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">建议处理方法</div>
            <div class="line-type1-value">
              <el-input
                v-model="editparmlist[1].disposal"
                type="textarea"
                :rows="2"
                placeholder="请输入"
              />
            </div>
          </div>
          <!-- 高风险 -->
          <div class="line-type2">
            <div class="line-type2-name">风险等级</div>
            <div class="line-type2-value" style="color: rgba(212, 48, 48, 1);">高风险</div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">高风险虫害数量</div>
            <div class="line-type1-value">
              <el-input v-model="editparmlist[2].pestNum" placeholder="高风险虫害数量" />
            </div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">建议处理方法</div>
            <div class="line-type1-value">
              <el-input
                v-model="editparmlist[2].disposal"
                type="textarea"
                :rows="2"
                placeholder="请输入"
              />
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" type="success" @click="() => {cancel(); iseditshowdiaview = false}">取消</el-button>
          <el-button class="zh-button-two" type="primary" @click="save()">确认</el-button>
        </span>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/basic-info-manage/new-pest-manage/index";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue"
import { mymixin } from "@/utils/mixin"
import { getToken } from '@/utils/auth';
export default {
  name: "PestAlarmManage",
  components: { ActionBar, Pagination, BaseMainSlot },
  mixins: [mymixin],
  data() {
    return {
      // 可选择病虫害数组
      pestList: [
        // {pestName:'',pestId:''}
      ],
      alarmaddlist: [
        {
        // "pestId": 1,
          "alarmLevel": "低风险",
          "pestNum": '',
          // "organizationNo": 4,
          "disposal": ""
        },
        {
        // "pestId": 1,
          "alarmLevel": "中风险",
          "pestNum": '',
          // "organizationNo": 4,
          "disposal": ""
        },
        {
        // "pestId": 1,
          "alarmLevel": "高风险",
          "pestNum": '',
          // "organizationNo": 4,
          "disposal": ""
        }
      ],
      // 是否展示弹窗
      isaddshowdiaview: false,
      iseditshowdiaview: false,
      editparmlist: [
        {
        // "pestId": 1,
          "alarmLevel": "低风险",
          "pestNum": '',
          // "organizationNo": 4,
          "disposal": ""
        },
        {
        // "pestId": 1,
          "alarmLevel": "中风险",
          "pestNum": '',
          // "organizationNo": 4,
          "disposal": ""
        },
        {
        // "pestId": 1,
          "alarmLevel": "高风险",
          "pestNum": '',
          // "organizationNo": 4,
          "disposal": ""
        }
      ],
      selectidlist: []
    }
  },
  watch: {
    nowChanceStau(newval) {
    // 当状态为删除的时候触发删除方法---另外的删除修改添加，通过点击保存，调用方法来实现
      if (newval === 'add') {
        this.isaddshowdiaview = true
      }
      if (newval === 'edit') {
        this.iseditshowdiaview = true
      }
    }
  },
  created() {
    // 获取表格数据
    this.getTableDataList();
  },
  mounted() {
    this.getallpestmet()
  },
  methods: {
    getTableDataList() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize
      }
      nowpagereq.getalarmpestlist(params).then(res => {
        if (res.code === 1) {
          this.loading = false;
          let list = res.data
          this.tableData = list.content
          this.totalSize = list.totalElements
          this.addblankmet()
        } else {
          this.$message.error("获取表格失败")
        }
      })
    },
    delmessage() {
      nowpagereq.delalarmpestmessage(this.selectidlist).then(
        res => {
          if (res.code === 1) {
            this.getTableDataList()
            this.selectidlist = []
            this.$message.success('删除成功!')
          } else {
            this.$message.error("删除失败!")
          }
        }
      )
    },
    save() {
      if (this.nowChanceStau === 'add') {
        let orgid = getToken("organizationNo")
        let addlist = this.alarmaddlist.map(
          item => {
            let addmes = {
              "pestId": this.formData.pestId,
              "alarmLevel": item.alarmLevel,
              "pestNum": item.pestNum,
              "organizationNo": orgid,
              "disposal": item.disposal
            }
            return addmes
          }
        )
        nowpagereq.addalarmpestmessage(addlist).then(
          res => {
            if (res.code === 1) {
              this.formData = {}
              this.$message.success('添加成功')
              this.resetActionBar()
              this.isaddshowdiaview = false
              this.getTableDataList()
            } else {
              this.$message.warning("添加失败")
            }
          }
        )
      }
      // 修改--暂未完成
      if (this.nowChanceStau === 'edit') {
        let params = [
          ...this.editparmlist
        ]
        nowpagereq.editalarmpestmessage(params).then(
          res => {
            if (res.code === 1) {
              this.$message.success('修改成功')
              this.resetActionBar()
              this.iseditshowdiaview = false
              this.getTableDataList()
            } else {
              this.$message.warning("修改失败")
            }
          }
        )
      }
    },
    // 获取可选择你的虫子
    async getallpestmet() {
      let { data: list } = await nowpagereq.querynewpestmessage()
      this.pestList = list
      // console.log(list)
    },
    // 表格选择
    handleSelectionChange(list) {
      this.selectidlist = [];
      let notvalue = true
      this.selectidlist = list.map(item => {
        if (item.pestId) {
          return item.pestId
        } else {
          notvalue = false
          return ""
        }
      })
      this.selectidlist = Array.from(new Set(this.selectidlist))
      if (!notvalue) {
        this.delActive = false
        this.$message.warning("请不要选择空行!")
      } else {
        this.delActive = true
      }
    },
    // 表格选中
    async handleEdit(row) {
      if (row.pestId) {
        this.formData = row;
        let { data: alarmlist } = await nowpagereq.querYalarmpestmessage({ pestId: row.pestId })
        this.editparmlist = alarmlist
        console.log(alarmlist)
        this.editActive = true;
        this.saveActive = false;
        this.cancelActive = true;
        this.canInput = false;
      }
    },
    // 页数与页码选择
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    }
  }

}
</script>
<style lang="scss" scoped>
.zh-dialog-content{
    width: 100%;
    .line-type1{
      width: 96%;
      margin-left: 2%;
      min-height: 40px;
      // background-color: rgb(240, 26, 26);
      display: flex;
      flex-direction: row;
      // justify-content: center;
      align-items: center;
      font-size: 16px;
       margin-bottom: 5px;
      .line-type1-name{
        width: 120px;
        text-align: right;
        white-space: nowrap;
        height: 40px;
        line-height: 40px;
      }
      .line-type1-value{
        width: calc(100% - 130px);
        margin-left: 10px;
        white-space: nowrap;
        // background-color: chartreuse;
        min-height: 40px;
        line-height: 40px;
        ::v-deep .el-select {
          width: 100%;
          // background-color: chocolate;
        }
        ::v-deep .el-input__inner{
          color: rgba(0, 0, 0, 0.65) !important;
        }
        ::v-deep .el-textarea__inner{
          color: rgba(0, 0, 0, 0.65) !important;
        }
      }
    }
    .line-type2{
      width: 96%;
      margin-left: 2%;
      height: 40px;
      // background-color: rgb(240, 26, 26);
      display: flex;
      flex-direction: row;
      // justify-content: center;
      align-items: center;
      font-size: 16px;
      margin-bottom: 5px;
      .line-type2-name{
        width: 120px;
        text-align: right;
        white-space: nowrap;
        height: 40px;
        line-height: 40px;
      }
      .line-type2-value{
        width: calc(100% - 130px);
        margin-left: 10px;
        white-space: nowrap;
        // background-color: chartreuse;
        height: 40px;
        line-height: 40px;
      }
    }
}
</style>
